<template>
  <div class="app-container">
    <el-row>
      <el-col :span="3" style="color: rgba(0,0,0,0)">发布课程</el-col>
      <el-col :span="18">
        <!--课程预览-->
        <el-card class="card" shadow="always">
          <el-row>
            <el-col :span="12">
              <el-row class="title">{{ coursePublish.title }}</el-row>
              <el-row class="lessonNum">
                <span class="label"><svg-icon icon-class="clock"/>总课时</span>
                {{ coursePublish.lessonNum }}
              </el-row>
              <el-row class="subject">
                <span class="label"><svg-icon icon-class="book"/>所属科目</span>
                {{ coursePublish.subjectParentTitle }}
                <i class="el-icon-arrow-right"></i>
                {{ coursePublish.subjectTitle }}
              </el-row>
              <el-row class="teacher">
                <el-col :span="8">
                  <span class="label"><svg-icon icon-class="doctor"/>讲师</span>
                  {{ coursePublish.teacherName }}
                </el-col>
                <el-col :span="5">
                  <el-avatar :size="55" :src="coursePublish.teacherAvatar" fit="contain" class="avatar-img"/>
                </el-col>
                <el-col :span="11">
                  <div v-if="Number(coursePublish.price) === 0" class="price free">
                    限时免费
                  </div>
                  <div v-else class="price">￥{{ coursePublish.price }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div v-if="coursePublish.cover!=null">
                <el-image :src="coursePublish.cover" fit="contain" class="cover-img"/>
              </div>
              <div v-else>
                <el-image src="https://hsedu-horsen.oss-cn-beijing.aliyuncs.com/cover/default.png" fit="contain" class="cover-img"/>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col></el-col>
    </el-row>
    <div style="text-align:center">
      <el-button type="primary" size="medium" @click="prev()" icon="el-icon-arrow-left">上一步</el-button>
      <el-button :disabled="publishBtnDisabled" type="primary" size="medium" @click="publish()">发布课程</el-button>
    </div>

  </div>
</template>

<script>
import { courseApi } from '@/api'

export default {
  data() {
    return {
      publishBtnDisabled: false, // 发布按钮是否禁用
      coursePublish: {}
    }
  },
  created() {
    if (this.$parent.courseId) {
      this.fetchData(this.$parent.courseId)
    }
  },
  methods: {
    // 获取课程发布
    fetchData(id) {
      courseApi.queryPublishById(id).then(response => {
        this.coursePublish = response.data.item
      })
    },
    // 上一步
    prev() {
      this.$parent.active = 1
    },
    // 发布课程
    publish() {
      this.publishBtnDisabled = true
      courseApi.updateStatus(this.$parent.courseId, 'pass').then(response => {
        this.$parent.active = 3
        this.$message.success(response.message)
        this.$router.push({ path: '/course' })
      })
    }
  }
}
</script>

<style lang="scss">
.card {
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 30px;

  svg {
    margin-right: 5px;
  }

  .label {
    margin-right: 10px;
    color: #909399;
  }

  .title {
    height: 60px;
    line-height: 50px;
    color: #073B4C;
    font-size: 25px;
  }

  .lessonNum {
    height: 45px;
    line-height: 45px;
  }

  .subject {
    height: 45px;
    line-height: 45px;
  }

  .teacher {
    height: 90px;
    line-height: 90px;

    .avatar-img {
      margin: 0 auto -20px;
    }
  }

  .price {
    color: #FFC233;
    font-weight: bold;
    font-size: 26px;
    font-family: "Microsoft YaHei";
    float: right;
    margin-right: 40px;
  }

  .free {
    color: #42B983;
  }

  .cover-img {
    width: 427px;
    height: 238px;
    border-radius: 10px;
    margin: 0 auto -6px;
    float: right;
  }
}

</style>
